<template>
	<view class="page index">
		<view class="header">
			<common-search v-model="keyWord" :isFilter="false" @input="input"></common-search>
		</view>
		<view class="main">
			<view class="create" @click="create">
				新建
			</view>
			<empty v-if="empty" :desc="desc"></empty>
			<scroll-view v-else class="scroll" scroll-y="true" @scrolltolower="scrollLower" :enhanced="true" :show-scrollbar="false">
				<view class="container">
					<view class="list" v-for="(item, index) in contactList" :key="index" @click="toDetails(item.id)">
						<view class="item">
							<view class="top">
								<view class="name">
									{{item.name || '无'}}
								</view>
								<view class="post">
									<view class="key" v-if="item.post">
										{{item.post}}
									</view>
									<view class="value">
										{{item.master ? '关键决策人' : '非关键决策人'}}
									</view>
								</view>
							</view>
							<view class="company">
								{{item.customerName || '无'}}
							</view>
							<view class="phone">
								手机号码：{{item.mobile || '无'}}
							</view>
							<block v-if="item.showAll">
								<view class="message">
									<view class="mes-item">
										电话号码：{{item.telephone || '无'}}
									</view>
									<view class="mes-item">
										邮箱地址：{{item.email || '无'}}
									</view>
									<view class="mes-item">
										家庭住址：{{item.detailAddress || '无'}}
									</view>
									<view class="mes-item">
										生日：{{item.birthday ? (item.birthday[0] + '-' + item.birthday[1] + '-' + item.birthday[2]) : '无'}}
									</view>
									<view class="mes-item">
										备注：{{item.remark || '无'}}
									</view>
								</view>
							</block>
							<view class="more" @click.stop="showMore(index, item.showAll)">
								<span class="iconfont icon" v-if="item.showAll">&#xea51;</span>
								<span class="iconfont icon" v-else>&#xea4e;</span>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import commonSearch from "@/components/commonSearch.vue";
	import {getContactListApi} from "@/api/contact_api.js";
	import empty from "@/components/empty.vue";
	export default{
		components:{
			commonSearch,
			empty
		},
		data(){
			return{
				keyWord:'',
				empty:false,
				desc: '',
				contactList:[],
				pageNum: 1,
				pageSize:10,
				totalPage: 1
			}
		},
		onShow() {
			uni.showLoading({
				mask:true,
				title:'加载中...'
			})
			this.contactList = [];
			this.getContactList();
		},
		methods:{
			scrollLower(){
				console.log('触底');
				if(this.pageNum >= this.totalPage){
					return;
				}
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum++;
				this.getContactList();
			},
			// 获取联系人列表
			async getContactList(){
				this.empty = false;
				if(this.keyWord == ''){
					this.desc = '暂无联系人'
				}else{
					this.desc = '未搜索到联系人'
				}
				let res = await getContactListApi({
					name: this.keyWord,
					pageNo: this.pageNum,
					pageSize: this.pageSize
				}).catch(() => {
					this.empty = true;
					return Promise.reject();
				})
				res.data.list = res.data.list.map((item) => {
					let showAll = false;
					return{
						...item,
						showAll
					}
				})
				this.contactList = [...this.contactList, ...res.data.list];
				this.totalPage = Math.ceil(res.data.total / this.pageSize);
				if(this.contactList.length == 0){
					this.empty = true;
				}
				await uni.hideLoading();
			},
			showMore(index, value){
				this.contactList[index].showAll = !value;
			},
			// 关键字搜索
			input(){
				uni.showLoading({
					mask:true,
					title:'加载中...'
				})
				this.pageNum = 1;
				this.contactList = [];
				this.getContactList();
			},
			//新建
			create(){
				uni.navigateTo({
					url:'/pages/index/contact/createContact'
				})
			},
			// 详情
			toDetails(id){
				uni.navigateTo({
					url:`/pages/index/contact/details?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/common/style/customicons.scss";
	.index{
		@include flex-c;
		.header{
			flex: 0 0 auto;
			padding: 24rpx 28rpx 0;
		}
		.main{
			flex: 1 0 0;
			overflow: hidden;
			position: relative;
			.create{
				position: absolute;
				z-index: 1;
				right: 30rpx;
				bottom: 200rpx;
				@include flex-r-center-center;
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				box-shadow: 0px 2px 6px 0px rgba(0,0,0,0.4);
				background-color: #4095E5;
				color: #fff;
				font-size: 24rpx
			}
			.scroll{
				height: 100%;
				.container{
					padding: 24rpx 28rpx;
					.list{
						padding: 0 0 18rpx;
						.item{
							@include box;
							padding: 22rpx 28rpx 0;
							.top{
								@include flex-r-between-center;
								.name{
									color: #000;
									font-size: 26rpx;
								}
								.post{
									@include flex-r;
									.key,.value{
										color: #fff;
										font-size: 20rpx;
										height: 36rpx;
										line-height: 36rpx;
										border-radius: 4rpx 20rpx 20rpx 4rpx;
										text-align: center;
									}
									.key{
										// width: 80rpx;
										background-color: #3BBF03;
										padding: 0 10rpx;
										margin-right: 5rpx;
									}
									.value{
										width: 140rpx;
										background-color: #3388FF;
									}
								}
							}
							.company{
								color: #000;
								font-size: 26rpx;
								padding: 14rpx 0 18rpx;
							}
							.phone{
								color: #9A9A9A;
								font-size: 24rpx;
							}
							.message{
								.mes-item{
									color: #9A9A9A;
									font-size: 24rpx;
									padding: 18rpx 0 0;
								}
							}
							.more{
								@include flex-r-center-center;
								padding: 22rpx 0 16rpx;
								.icon{
									color: #BEBEBE;
									font-size: 28rpx
								}
							}
						}
					}
				}
			}
		}
	}
</style>